<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	template="./../template.xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">
	
	<ui:define name="tituloJanela">
		<title>Cadastrar Novo Setor</title>
	</ui:define>

	<ui:define name="tituloCima">
		<h1>Cadastrar Novo Setor</h1>
	</ui:define>
	
	<ui:define name="conteudo">
		<h:form id="tabelaForm">
			<p:messages></p:messages>
			<p:panel header="Cadastrar Setor">
			<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
			
				<h:outputLabel value="Nome: "/>
				<p:inputText value="#{setorMB.setor.descricao}" required="true" 
					requiredMessage="Entre com o nome do setor." size="35"/>
				
				<h:outputLabel value="Sigla: "/>
				<p:inputText value="#{setorMB.setor.sigla}" required="true" 
					requiredMessage="Entre com a sigla do setor." size="35"/>
				
				<h:outputLabel value="Prédio: "/>
				<p:selectOneMenu value="#{setorMB.setor.predio}" effect="fade" required="true"
		        	requiredMessage="Selecione o prédio onde o setor está localizado." style="width: 358px;">  
		            <f:selectItem itemLabel="Selecionar" itemValue=""/>  
		            <f:selectItems value="#{predioMB.predioItens}"/>
		        </p:selectOneMenu>
		        <p:spacer  rendered="#{setorMB.isEdicao()}"/>
				<p:inputText value="#{setorMB.nomePredio}" disabled="true" rendered="#{setorMB.isEdicao()}"
					size="35"/>
		        
		        <h:outputLabel value="Andar: "/>
				<p:inputText value="#{setorMB.setor.andar}" required="true" 
					requiredMessage="Entre com o andar do setor no prédio." size="35"/>
			</h:panelGrid>
			
	        <h:outputLabel value="Lista Ramais:"/>
	        <p:dataTable id="tabelaRamais" value="#{setorMB.ramais}" var="ramal" itemType="circle" emptyMessage="Nenhum ramal adicionado ao setor." style="width: 450px;">
	        <p:column>
	        	<f:facet name="header">Ramal:</f:facet>
	        	<h:outputLabel value="#{ramal.numero}"/>	
			</p:column>
			<p:column>
				<f:facet name="header">Remover</f:facet>
				<div style="text-align: center;">
					<p:commandButton title="Remover" action="#{setorMB.removeRamal}" ajax="false" update=":ramais" icon="ui-icon-trash">
						<f:setPropertyActionListener target="#{setorMB.ramalSelecionado}" value="#{ramal}"/>
					</p:commandButton>
				</div>
			</p:column>
			</p:dataTable>			        
		    
		    <h:panelGrid columns="3" style="margin-bottom:10px" cellpadding="5">
		        <h:outputLabel value="Ramal: "/>
				<p:selectOneMenu value="#{setorMB.ramalSelecionado}" effect="fade" required="false"
		        	requiredMessage="Selecione o ramal ou número do setor." style="width: 200px;">  
		            <f:selectItem itemLabel="Selecionar" itemValue=""/>  
		            <f:selectItems value="#{ramalMB.ramalItens}"/>
		        </p:selectOneMenu>
		        <p:commandLink action="#{setorMB.adicionaRamalAdmin}" value="Adiciona Ramal" ajax="true" update="tabelaRamais"/>	
			</h:panelGrid>
		    </p:panel>	        	
			<br/>
			<p:commandButton action="#{setorMB.adicionaSetor}" value="Salvar" update=":tabelaForm" ajax="false"/>
		</h:form>
	</ui:define>
</ui:composition>